html {
    height: 100%;
    width: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: #f8f8f8;
}

#app {
    width: 100%;
    height: 100%;
}

$base-color: #00b38a;
@font-face {
    font-family: 'yofont';
    src: url('../assets/iconfont/iconfont.woff') format('woff'), url('../assets/iconfont/iconfont.ttf') format('truetype')
}

%pos-list {
    .nav {
        height: .8rem;
        padding: 4% 2%;
        background-color: #ffffff;
        li {
            display: block;
            float: left;
            color: #333;
            text-decoration: none;
            width: 25%;
            height: .6rem;
            text-align: center;
            img {
                display: block;
                width: .38rem;
                height: .38rem;
                margin: 0 auto;
            }
            span {
                display: block;
                font-size: 0.12rem;
                color: #666666;
                padding-bottom: 0.1rem;
            }
        }
    }
    .coat-contain {
        width: 100%;
        height: 288%;
        margin-top: .08rem;
        background: #fff;
        .coatDetail {
            width: 100%;
            height: 100%;
            .coatSmall {
                width: 100%;
                height: 288%;
                display: inline-block;
                li {
                    width: 50%;
                    float: left;
                    display: block;
                    @include border(0 1px 1px 0);
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
    .medocShow {
        width: 100%;
        background: #fff;
        .medocimg {
            background: #f8f8f8;
            padding-bottom: .1rem;
            display: block;
            width: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .medocMenu {
            padding-top: 0.08rem;
            background-color: #ffffff;
            padding-bottom: 2%;
            width: 100%;
            padding-left: 2.5%;
            a {
                height: 1.05rem;
                width: 31.3%;
                display: block;
                float: left;
                margin-bottom: 2%;
                margin-right: .05rem;
                img {
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                }
            }
        }
    }
    .no-more {
        font-size: 0.14rem;
        color: #999;
        text-align: center;
        background: #f8f8f8;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }
}

%load-wj {
    .hz-load {
        width: 100%;
        height: 44%;
        margin: 1% 0 2% 0;
        img {
            width: 100%;
            height: 100%;
        }
    }
}

%wine-list {
    .hztem {
        @include flex();
        width: 100%;
        li {
            @include flexbox();
            background: white;
            margin: 2% 2% 0 2%;
            .hz-Limg {
                width: 34%;
                height: 86%;
                margin: 3%;
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .hz-Ltxt {
                @include flex();
                @include flexbox();
                @include flex-direction(column);
                padding: 3%;
                .hz_Ttxt {
                    @include flex();
                    width: 100%;
                    height: 100%;
                    .hz_Tname {
                        max-height: 2.6em;
                        font-size: 4.5vw;
                        overflow: hidden;
                        line-height: 1.3em;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        word-break: break-all;
                        width: 100%;
                    }
                }
                .hz_Btxt {
                    height: 24%;
                    width: 100%;
                    margin-top: 3%;
                    color: #ca0915;
                    @include flexbox();
                    em {
                        font-size: 4.5vw;
                        @include flex();
                        i {
                            font-size: 3.5vw;
                            font-style: normal;
                        }
                    }
                    a {
                        background: red;
                        color: black;
                        width: 43%;
                        padding: 7% 0;
                        margin-bottom: 1%;
                        margin-right: 1%;
                        border-radius: 3px;
                        text-align: center;
                        height: 100%;
                        @include flexbox();
                        @include justify-content(center);
                        @include align-items(center); //垂直 
                    }
                }
            }
        }
    }
}

%zone-header {
    .header {
        height: .44rem;
        width: 100%;
        background: white;
        position: relative;
        @include flexbox();
        .back,
        .hd-right {
            width: .4rem;
            @include flexbox();
            @include align-items(center); //垂直
        }
        .back:after {
            content: "";
            width: .1rem;
            height: .1rem;
            margin-left: .21rem;
            border-bottom: .01rem solid #999999;
            border-right: .01rem solid #999999;
            transform: rotate(135deg);
        }
        .hd-right {
            span {
                width: .05rem;
                height: .05rem;
                background: #999;
                border-radius: 50%;
                margin-left: .05rem;
            }
        }
        .hz-title-bar {
            @include flex();
            @include flexbox();
            @include justify-content(center);
            @include align-items(center); //垂直
            font-size: .16rem;
            color: #333;
        }
        .navList {
            position: absolute;
            z-index: 100;
            top: 100%;
            right: 10px;
            // width: 100px;
            display: block;
            background-color: #000;
            border-radius: 4px;
            padding: 0 10px;
            margin-top: 2px;
            li {
                font-size: 0.14em;
                line-height: 1.5;
                a {
                    color: #ffffff;
                    text-decoration: none;
                    font-size: 14px;
                    text-align: left;
                    display: block;
                    padding: 8px 0;
                    padding-left: 30px;
                    line-height: 1.5em;
                    border-bottom: 1px solid #434343;
                }
            }
        }
    }
}